<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="./../../css/bootstrap.css">
  <style>
    .blog-img{
      width: 50px;
    }
  </style>
  <script src="./../../js/jq.js"></script>
  <script src="./../../js/bootstrap.js"></script>
  <script>
    function loadlist() {
      $.getJSON("http://localhost:8081/weibo/admin/blog/list", function (res) {
        console.log(res)
        $("tbody").empty()

        res.data.forEach(blog => {
          let imgshtml = "";
          blog.imgs.forEach(img => {
            imgshtml += ` <img class="blog-img" src="http://127.0.0.1:8081/weibo/${img.url}"/>`;
          });
          const template = `
            <tr>
              <td>${blog.blogId}</td>
              <td>${blog.user.nickname}</td>
              <td>${blog.content}</td>
              <td>${imgshtml}</td>
              <td>${blog.createdTime}</td>
              <td>
                <a href="blogEditFrame.html?blogId=${blog.blogId}">编辑</a>
                <a href="#">删除</a>
                </td>
            </tr>`;
          $("tbody").append(template);
        });
      })
    }

    $(function (){
      loadlist()
    })
  </script>
</head>
<body>
<div >
  <table class="table">
    <caption>博客列表</caption>
    <thead>
    <tr>
      <th>id</th>
      <th>发帖人</th>
      <th>内容简要</th>
      <th>图片</th>
      <th>发帖时间</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>